---
import { i18n } from '../../i18n/translation';
import I18nKey from '../../i18n/i18nKey';

export interface Props {
  project: {
    id: string;
    title: string;
    description: string;
    image?: string;
    category: string;
    techStack: string[];
    status: 'completed' | 'in-progress' | 'planned';
    demoUrl?: string;
    sourceUrl?: string;
    startDate: string;
    endDate?: string;
    featured?: boolean;
    tags?: string[];
  };
  size?: 'small' | 'medium' | 'large';
  showImage?: boolean;
  maxTechStack?: number;
}

const { 
  project, 
  size = 'medium', 
  showImage = true, 
  maxTechStack = 4 
} = Astro.props;

// 状态样式映射
const getStatusStyle = (status: string) => {
  switch (status) {
    case 'completed':
      return 'bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-400';
    case 'in-progress':
      return 'bg-yellow-100 text-yellow-700 dark:bg-yellow-900/30 dark:text-yellow-400';
    case 'planned':
      return 'bg-gray-100 text-gray-700 dark:bg-gray-900/30 dark:text-gray-400';
    default:
      return 'bg-gray-100 text-gray-700 dark:bg-gray-900/30 dark:text-gray-400';
  }
};

// 状态文本映射
const getStatusText = (status: string) => {
  switch (status) {
    case 'completed':
      return i18n(I18nKey.projectsCompleted);
    case 'in-progress':
      return i18n(I18nKey.projectsInProgress);
    case 'planned':
      return i18n(I18nKey.projectsPlanned);
    default:
      return status;
  }
};

// 尺寸样式映射
const getSizeClasses = (size: string) => {
  switch (size) {
    case 'small':
      return {
        container: 'p-4',
        title: 'text-lg',
        description: 'text-sm line-clamp-2',
        tech: 'text-xs',
        links: 'text-sm'
      };
    case 'large':
      return {
        container: 'p-6',
        title: 'text-xl',
        description: 'text-base line-clamp-3',
        tech: 'text-sm',
        links: 'text-base'
      };
    default: // medium
      return {
        container: 'p-5',
        title: 'text-lg',
        description: 'text-sm line-clamp-2',
        tech: 'text-xs',
        links: 'text-sm'
      };
  }
};

const sizeClasses = getSizeClasses(size);
---

<div class="bg-white dark:bg-gray-800 rounded-lg border border-black/10 dark:border-white/10 overflow-hidden hover:shadow-lg transition-all duration-300 group">
  <!-- 项目图片 -->
  {showImage && project.image && (
    <div class={`overflow-hidden ${size === 'large' ? 'aspect-video' : 'aspect-[4/3]'}`}>
      <img 
        src={project.image} 
        alt={project.title}
        class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-300"
        loading="lazy"
      />
    </div>
  )}
  
  <!-- 项目内容 -->
  <div class={sizeClasses.container}>
    <!-- 标题和状态 -->
    <div class="flex items-start justify-between mb-3">
      <h3 class={`font-semibold text-black/90 dark:text-white/90 ${sizeClasses.title} ${size === 'small' ? 'line-clamp-1' : ''}`}>
        {project.title}
      </h3>
      <span class={`px-2 py-1 text-xs rounded-full shrink-0 ml-2 ${getStatusStyle(project.status)}`}>
        {getStatusText(project.status)}
      </span>
    </div>
    
    <!-- 分类标签 -->
    {project.category && (
      <div class="mb-2">
        <span class="px-2 py-1 text-xs bg-blue-50 text-blue-600 dark:bg-blue-900/20 dark:text-blue-400 rounded">
          {project.category}
        </span>
      </div>
    )}
    
    <!-- 项目描述 -->
    <p class={`text-black/60 dark:text-white/60 mb-4 ${sizeClasses.description}`}>
      {project.description}
    </p>
    
    <!-- 技术栈 -->
    {project.techStack && project.techStack.length > 0 && (
      <div class="flex flex-wrap gap-1 mb-4">
        {project.techStack.slice(0, maxTechStack).map((tech) => (
          <span class={`px-2 py-1 bg-gray-100 text-gray-700 dark:bg-gray-700 dark:text-gray-300 rounded ${sizeClasses.tech}`}>
            {tech}
          </span>
        ))}
        {project.techStack.length > maxTechStack && (
          <span class={`px-2 py-1 bg-gray-100 text-gray-700 dark:bg-gray-900/30 dark:text-gray-400 rounded ${sizeClasses.tech}`}>
            +{project.techStack.length - maxTechStack}
          </span>
        )}
      </div>
    )}
    
    <!-- 标签 -->
    {project.tags && project.tags.length > 0 && (
      <div class="flex flex-wrap gap-1 mb-4">
        {project.tags.map((tag) => (
          <span class={`px-2 py-1 bg-purple-100 text-purple-700 dark:bg-purple-900/30 dark:text-purple-400 rounded ${sizeClasses.tech}`}>
            #{tag}
          </span>
        ))}
      </div>
    )}
    
    <!-- 链接 -->
    <div class="flex gap-3">
      {project.demoUrl && (
        <a 
          href={project.demoUrl} 
          target="_blank" 
          rel="noopener noreferrer"
          class={`text-blue-600 dark:text-blue-400 hover:underline font-medium transition-colors ${sizeClasses.links}`}
        >
          {i18n(I18nKey.projectsDemo)}
        </a>
      )}
      {project.sourceUrl && (
        <a 
          href={project.sourceUrl} 
          target="_blank" 
          rel="noopener noreferrer"
          class={`text-gray-600 dark:text-gray-400 hover:underline font-medium transition-colors ${sizeClasses.links}`}
        >
          {i18n(I18nKey.projectsSource)}
        </a>
      )}
    </div>
    
    <!-- 特色项目标识 -->
    {project.featured && (
      <div class="absolute top-3 left-3">
        <span class="px-2 py-1 text-xs bg-yellow-100 text-yellow-700 dark:bg-yellow-900/30 dark:text-yellow-400 rounded-full flex items-center gap-1">
          ⭐ {i18n(I18nKey.projectsFeatured)}
        </span>
      </div>
    )}
  </div>
</div>

<style>
  .line-clamp-1 {
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  
  .line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  
  .line-clamp-3 {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
</style>